<template lang="pug">
.view.cp-product-man-basic.fix-flex-pos
  //- 查询
  el-form.bc-search(:inline="true")
    el-form-item(label="产品 : ")
      el-select(v-model="productName", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productSelect",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="所属模块 : ")
      el-select(v-model="productModule", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productModuleSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="标签 : ")
      el-select(v-model="productTag", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productTagSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="层级 : ")
      el-select(v-model="productLevel", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productLevelSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-button(type="primary", @click="searchBasic") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
  .bc-detail
    .detail-tree(v-loading="loadingTree")
      ProductBasic(
        :tree="productTree",
        @view-query="viewQuery"
        @change-list="changeBasicList")
    .detail-list(v-loading="loadingBasics")
      .detail-table
        el-table(:data="basicList", highlight-current-row, height="100%", size="mini")
          el-table-column(align="center", show-overflow-tooltip, prop="id", label="ID")
          el-table-column(align="center", show-overflow-tooltip, prop="title", label="标题")
          el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
            template(slot-scope="scope")
              span {{ scope.row.status | compare-list(statusSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="priority", label="优先级")
          el-table-column(align="center", show-overflow-tooltip, prop="level", label="层级")
            template(slot-scope="scope")
              span {{ scope.row.level | compare-list(productLevelSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="tags", label="标签")
          el-table-column(align="center", show-overflow-tooltip, prop="module", label="所属模块")
            template(slot-scope="scope")
              span {{ scope.row.module | compare-list(productModuleSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="createTime", label="创建时间")
            template(slot-scope="scope")
              span {{ scope.row.createTime | date-format }}
          el-table-column(align="center", show-overflow-tooltip, prop="createUser", label="创建人")
      //- 分页
      el-pagination.detail-pagination(
        layout="total, prev, pager, next, jumper",
        @current-change="changeBasicPage",
        :current-page.sync="currentPage",
        :page-size="20",
        :total="basicListTotal")
  ProductQuery(:visible="showQuery", @close="showQuery=false")
</template>

<script>
import { mapGetters } from 'vuex';
import ProductData from '@/data/product';
import ProductBasic from '@/components/manage/product/ProductBasic';
import ProductQuery from '@/components/manage/product/ProductQuery';

export default {
  name: 'probasic',
  components: {
    ProductBasic,
    ProductQuery
  },
  data() {
    return {
      // search block
      productName: null,
      productModule: null,
      productTag: null,
      productLevel: null,
      productTree: [{
        id: '1',
        label: '产品名称',
        children: []
      }],
      // table block
      basicList: [],
      basicListTotal: 1,
      loadingTree: true,
      loadingBasics: true,
      currentPage: 1,
      statusSelect: [
        { name: '新建', value: '0' },
        { name: '已发布', value: '1' }
      ],
      productTagSelect: [],
      productTagSelectAll: [],
      productModuleSelect: [],
      productModuleSelectAll: [],
      showQuery: false
    };
  },
  computed: {
    ...mapGetters([
      'productSelect',
      'productLevelSelect',
      'productLevelSelectAll'
    ])
  },
  watch: {
    productSelect () {
      if (this.productSelect.length) {
        this.productName = this.productSelect[0].value;
        // TODO GET TraceInfo
      }
    }
  },
  methods: {
    resetSearch () {
      this.productName = null;
      this.productKey = null;
      this.productStatus = null;
      this.productFromNode = null;
      this.productToNode = null;
    },
    searchBasic () {
      console.log('search');
    },
    // 监听审批翻页
    changeBasicPage (currentPage) {
      console.log(currentPage);
    },
    changeBasicList (id) {
      this.loadingBasics = true;
      setTimeout(() => {
        this.basicList = ProductData.productBasics;
        this.basicListTotal = 121;
        this.loadingBasics = false;
      }, 1000);
      console.log(id);
    },
    viewQuery () {
      this.showQuery = true;
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.basicList = ProductData.productBasics;
      this.basicListTotal = 121;
      this.loadingBasics = false;

      this.productTree = [{
        id: '1',
        label: '产品名称',
        children: [{
          id: '1-1',
          label: '一级子系统A',
          children: [{
            id: '1-1-1',
            label: '二级子系统A1'
          }]
        }, {
          id: '1-2',
          label: '一级子系统B',
          children: [{
            id: '1-2-1',
            label: '二级子系统B1'
          }, {
            id: '1-2-2',
            label: '二级子系统B1'
          }]
        }]
      }];
      this.loadingTree = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
$TREEWIDTH: 320px
$SEARCHHEIGHT: 56px
$GAPWIDTH: 16px
.cp-product-man-basic
  .bc-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .bc-detail
    position: absolute
    top: $SEARCHHEIGHT
    left: $GAPWIDTH
    right: $GAPWIDTH
    bottom: $GAPWIDTH
    overflow: auto
    .detail-tree
      position: absolute
      top: 0
      bottom: 0
      left: 0
      width: $TREEWIDTH
      // border: 1px solid gray
      overflow-x: hidden
      overflow-y: auto
      background-color: white
    .detail-list
      position: absolute
      top: 0
      bottom: 0
      left: $TREEWIDTH + 16px
      right: 0
    .detail-table
      position: absolute
      top: 0
      bottom: $SEARCHHEIGHT
      left: 0
      right: 0
      overflow: auto
      table
        &::before
          display: none
        .icon-act
          font-size: 16px
          margin-left: 3px
          margin-right: 3px
    .detail-pagination
      position: absolute
      bottom: 12px
      left: 0
      right: 0
      text-align: center
</style>
